import { defineComponent, computed, ref, reactive, resolveDirective, mergeProps, withCtx, unref, createVNode, withDirectives, vModelText, openBlock, createBlock, createTextVNode, toDisplayString, Fragment, renderList, withKeys, createCommentVNode, useSSRContext } from "vue";
import { ssrRenderComponent, ssrRenderStyle, ssrRenderAttr, ssrRenderAttrs, ssrGetDirectiveProps, ssrInterpolate, ssrRenderList } from "vue/server-renderer";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { debounce } from "lodash-es";
import { j as useTrack, x as helpSearchResultRoute, l as useNativeInfoStore, a1 as getHelpCenterResultListApi, A as AppLayout, S as SearchIcon, r as helpCenterDetailRoute, a0 as exitAppWebPage, _ as _export_sfc } from "../entry-server.js";
import "path";
import "pinia";
import "dayjs";
import "dayjs/plugin/utc.js";
import "qs";
import "axios";
import "big.js/big.mjs";
import "@vueuse/core";
import "uuid";
import "url";
import "fs/promises";
const __default__ = defineComponent({
  name: "HelpSearchResult",
  components: { SearchIcon, AppLayout }
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  __ssrInlineRender: true,
  setup(__props) {
    useTrack();
    const trackPageName = computed(() => {
      var _a;
      const name = ((_a = helpSearchResultRoute.meta) == null ? void 0 : _a.trackPageName) || "";
      return name ? name + "_" : "";
    });
    const router = useRouter();
    const i18n = useI18n();
    const t = i18n.t;
    const isARLang = computed(() => ["ar", "he"].includes(i18n.locale.value));
    const searchStyle = computed(() => {
      return isARLang.value ? { right: "24px" } : { left: "24px" };
    });
    const keywords = ref("");
    const nativeInfoStore = useNativeInfoStore();
    const stickyStyle = computed(() => {
      const style = {};
      if (nativeInfoStore.isFromApp) {
        Object.assign(style, { height: `${56 + nativeInfoStore.iphoneStatebarHeight}px` });
      }
      return style;
    });
    const maxCacheSize = 20;
    const cacheResultMap = ref([]);
    const searchResult = computed(() => {
      const matchCacheItem = cacheResultMap.value.find((item) => item.keywords === keywords.value);
      if (matchCacheItem) {
        return matchCacheItem.result.map((item) => {
          return { ...item, titles: item.title.split(new RegExp(`(${keywords.value})`, "ig")) };
        });
      } else {
        return [];
      }
    });
    const onChangekeyWords = debounce(() => {
      if (keywords.value) {
        if (!cacheResultMap.value.some((item) => item.keywords === keywords.value)) {
          const resultItem = reactive({ keywords: keywords.value, result: [], status: "loading" });
          cacheResultMap.value.unshift(resultItem);
          getHelpCenterResultListApi({ keywords: keywords.value }).then((content) => {
            const { titles = [] } = content;
            resultItem.result = titles;
            resultItem.status = "done";
          }).catch(() => {
            resultItem.result = [];
            resultItem.status = "done";
          });
        }
      } else {
        cacheResultMap.value.unshift({ keywords: keywords.value, result: [], status: "done" });
      }
      cacheResultMap.value = cacheResultMap.value.slice(0, maxCacheSize);
    }, 150);
    function goToDetail(item) {
      router.push({ name: helpCenterDetailRoute.name, params: { lang: i18n.locale.value, detailTitle: item.title, detailsId: item.id } });
    }
    function onCancel() {
      if (nativeInfoStore.isFromApp) {
        exitAppWebPage();
      } else {
        router.back();
      }
    }
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_track = resolveDirective("track");
      _push(ssrRenderComponent(AppLayout, mergeProps({ class: "help-search-result" }, _attrs), {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<label for="hc-search-input" class="hc-search" style="${ssrRenderStyle(stickyStyle.value)}" data-v-73017308${_scopeId}>`);
            _push2(ssrRenderComponent(unref(SearchIcon), {
              name: "search",
              class: "search-icon",
              style: searchStyle.value,
              width: 24
            }, null, _parent2, _scopeId));
            _push2(`<input id="hc-search-input"${ssrRenderAttr("value", keywords.value)} type="search" class="search-input"${ssrRenderAttr("placeholder", unref(t)("account.help.question"))} data-v-73017308${_scopeId}><button${ssrRenderAttrs(mergeProps({ class: "cancel-btn" }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: trackPageName.value + "cancel", eventName: "cancel" }, void 0, {
              click: true,
              exposure: true
            })))} data-v-73017308${_scopeId}>${ssrInterpolate(unref(t)("common.cancel"))}</button></label><div class="search-placeholder" data-v-73017308${_scopeId}></div><div class="search-list" data-v-73017308${_scopeId}><!--[-->`);
            ssrRenderList(searchResult.value, (item, index) => {
              _push2(`<div${ssrRenderAttrs(mergeProps({
                key: item.id,
                class: "search-item content2"
              }, ssrGetDirectiveProps(_ctx, _directive_track, { pId: `${trackPageName.value + "item-" + String(index + 1).padStart(3, "0")}`, eventName: "search_item" }, void 0, {
                click: true,
                exposure: true
              })))} data-v-73017308${_scopeId}><!--[-->`);
              ssrRenderList(item.titles, (text, idx) => {
                _push2(`<!--[-->`);
                if (text.toLowerCase() === keywords.value.toLowerCase()) {
                  _push2(`<span class="mark" data-v-73017308${_scopeId}>${ssrInterpolate(text)}</span>`);
                } else {
                  _push2(`<!--[-->${ssrInterpolate(text)}<!--]-->`);
                }
                _push2(`<!--]-->`);
              });
              _push2(`<!--]--></div>`);
            });
            _push2(`<!--]--></div>`);
            if (searchResult.value.length === 0) {
              _push2(`<div class="empty-list" data-v-73017308${_scopeId}>`);
              _push2(ssrRenderComponent(unref(SearchIcon), {
                width: 80,
                height: 80,
                fill: "#757575"
              }, null, _parent2, _scopeId));
              _push2(`<p class="empty-txt content2" data-v-73017308${_scopeId}>${ssrInterpolate(unref(t)("product.category.no_results"))}</p></div>`);
            } else {
              _push2(`<!---->`);
            }
          } else {
            return [
              createVNode("label", {
                for: "hc-search-input",
                class: "hc-search",
                style: stickyStyle.value
              }, [
                createVNode(unref(SearchIcon), {
                  name: "search",
                  class: "search-icon",
                  style: searchStyle.value,
                  width: 24
                }, null, 8, ["style"]),
                withDirectives(createVNode("input", {
                  id: "hc-search-input",
                  "onUpdate:modelValue": ($event) => keywords.value = $event,
                  type: "search",
                  class: "search-input",
                  placeholder: unref(t)("account.help.question"),
                  onInput: unref(onChangekeyWords)
                }, null, 40, ["onUpdate:modelValue", "placeholder", "onInput"]), [
                  [vModelText, keywords.value]
                ]),
                withDirectives((openBlock(), createBlock("button", {
                  class: "cancel-btn",
                  onClick: onCancel
                }, [
                  createTextVNode(toDisplayString(unref(t)("common.cancel")), 1)
                ])), [
                  [
                    _directive_track,
                    { pId: trackPageName.value + "cancel", eventName: "cancel" },
                    void 0,
                    {
                      click: true,
                      exposure: true
                    }
                  ]
                ])
              ], 4),
              createVNode("div", { class: "search-placeholder" }),
              createVNode("div", { class: "search-list" }, [
                (openBlock(true), createBlock(Fragment, null, renderList(searchResult.value, (item, index) => {
                  return withDirectives((openBlock(), createBlock("div", {
                    key: item.id,
                    class: "search-item content2",
                    onClick: ($event) => goToDetail(item),
                    onKeydown: withKeys(($event) => goToDetail(item), ["enter"])
                  }, [
                    (openBlock(true), createBlock(Fragment, null, renderList(item.titles, (text, idx) => {
                      return openBlock(), createBlock(Fragment, null, [
                        text.toLowerCase() === keywords.value.toLowerCase() ? (openBlock(), createBlock("span", {
                          key: idx,
                          class: "mark"
                        }, toDisplayString(text), 1)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
                          createTextVNode(toDisplayString(text), 1)
                        ], 64))
                      ], 64);
                    }), 256))
                  ], 40, ["onClick", "onKeydown"])), [
                    [
                      _directive_track,
                      { pId: `${trackPageName.value + "item-" + String(index + 1).padStart(3, "0")}`, eventName: "search_item" },
                      void 0,
                      {
                        click: true,
                        exposure: true
                      }
                    ]
                  ]);
                }), 128))
              ]),
              searchResult.value.length === 0 ? (openBlock(), createBlock("div", {
                key: 0,
                class: "empty-list"
              }, [
                createVNode(unref(SearchIcon), {
                  width: 80,
                  height: 80,
                  fill: "#757575"
                }),
                createVNode("p", { class: "empty-txt content2" }, toDisplayString(unref(t)("product.category.no_results")), 1)
              ])) : createCommentVNode("", true)
            ];
          }
        }),
        _: 1
      }, _parent));
    };
  }
});
const HelpSearchResult_vue_vue_type_style_index_0_scoped_73017308_lang = "";
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/helpCenter/HelpSearchResult.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const HelpSearchResult = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-73017308"]]);
export {
  HelpSearchResult as default
};
